<template>
  <div class="bottom-colum">
    <div class="map">
      <img src="@/images/地图.jpg" width="100%" height="100%" alt=""/>
    </div>

    <div class="company">
      <p>
        <i class="el-icon-phone"></i>
        <span>热线电话</span>
      </p>
      <p class="company-phone">{{ phone }}</p>
      <img src="@/images/二维码.png" alt="" width="100px" height="100px"/>
      <div class="info">
        <p>联系 QQ:{{ QQ }}</p>
        <p>公司传真:{{ fax }}</p>
        <p>公司邮箱:{{ gmail }}</p>
        <p>公司地址:{{ address }}</p>
      </div>
      <div class="thank">
        <p>{{ thank }}</p>
      </div>
    </div>

    <div class="product">
      <p>
        <span class="chinese">我要定制</span> &nbsp; | <span class="english">PRODUCT</span>
      </p>
      <el-form :model="form" class="form">
        <el-input class="custom-input" v-model="form.name" placeholder="姓名"></el-input>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input class="custom-input" v-model="form.phone" placeholder="电话"></el-input>
          </el-col>
          <el-col :span="12">
            <el-input class="custom-input" v-model="form.wechat" placeholder="微信"></el-input>
          </el-col>
        </el-row>
        <el-input class="custom-input" type="textarea" v-model="form.option" placeholder="定制意向"></el-input>
        <el-button class="button">提&nbsp;&nbsp;交</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "400 655 1006",
      QQ: "58669186",
      fax: "400 655 1006",
      gmail: "test@163.com",
      address: "广东省珠海市",
      thank: "THANK-WEB DESIGN -TDC",
      form: {
        name: "",
        phone: "",
        wechat: "",
        option: ""
      }
    }
  }
};
</script>

<style scoped lang="less">
.bottom-colum {
  display: flex;
  flex-direction: row;
  text-align: left;
  height: 600px;
  color: white;
  //margin-top: 15px;

  .map {
    width: 33%;
  }

  .company {
    width: 33%;
    background-color: rgb(51, 51, 51);
    padding-left: 90px;
    padding-top: 50px;

    p {
      span {
        font-size: 13px;
      }
    }

    .company-phone {
      margin-top: -18px;
      font-size: 24px;
    }

    img {
      margin-top: 20px;
    }

    .info {
      color: rgb(91, 91, 91);
      margin-top: 50px;
    }

    .thank {
      color: rgb(91, 91, 91);
      margin-top: 90px;
    }
  }

  .product {
    width: 35%;
    background-color: rgb(51, 51, 51);
    padding-top: 50px;
    padding-right: 70px;

    p {
      font-size: 24px;

      .english {
        font-size: 14px;
        margin-left: 5px;
      }
    }

    .form {
      margin-top: 60px;

      .custom-input {
        color: white;
        background-color: rgb(51, 51, 51);
        padding: 10px;
      }

      .button {
        background-color: rgb(78, 67, 129);
        color: white;
        font-size: 18px;
        width: 140px;
        height: 38px;
        text-align: center;
        margin-top: 28px;
        margin-left: 10px;
        box-shadow: none;
      }
    }
  }
}
</style>
